<template>
  <div :style="{ display: 'flex' }" id="infoCardClass">
    <div>
      <a-space direction="vertical" size="large" class="inputHere">
        <a-input-search
          :style="{ width: '320px' }"
          v-model="searchKey"
          placeholder="请输入查询关键字"
          @press-enter="search"
          @search="search"
        />
      </a-space>
    </div>
    <div class="cards" :style="{ display: 'flex' }">
      <a-card
        :style="{ width: '360px' }"
        class="card"
        v-for="info in infos"
        :key="info.infoId"
        :title="info.infoTitle"
      >
        {{ info.infoText }}
      </a-card>
    </div>
  </div>
</template>
    
      <script>
import axios from "axios";
export default {
  data() {
    return {
      infos: [
        {
          infoId: 1,
          classId: 1000,
          infoTitle: "班级公告",
          infoText: "这是班级公告内容",
          isDelete: 0,
        },
      ],
      searchKey: "",
    };
  },
  methods: {
    search() {
      axios
        .post("/classInfo", {
          classId: this.$store.state.user.loginUser.classId,
          searchKey: this.searchKey,
        })
        .then((response) => {
          this.infos = response.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
  mounted() {
    this.search();
  },
};
</script>
      
    <style >
#infoCardClass {
  flex-direction: column;
  padding: 100px;
}
#infoCardClass .card {
  flex-direction: row;
  margin: 20px;
}
#infoCardClass .inputHere {
  margin-bottom: 50px;
}
</style>